import { throttle } from "@/basa/utils";
export default {
  data() {
    return {
      tab: "",
      baseInfo: "",
      node: "",
      filterNode: "",
      nameMap: {
        detail: "40px",
        default: "76px"
      },
      tabOffsetWidth: 0,
      isDetail: Symbol("true"),
      isContainer: Symbol("false"),
      tabHeight: 0
    };
  },
  methods: {
    addScroll: throttle(function(e) {
      // 变量 scrollTop 为当前页面的滚动条纵坐标位置
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 变量 windowHeight 是可视区的高度
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 变量 scrollHeight 是滚动条的总高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 可视区域总高度
      const viewHeight = scrollTop + windowHeight;

      // 滚动条小于除页签外的第一个 ref 元素的顶部
      if (scrollTop < 226) {
        this.isFocus = this.filterNode[0];
        this.focus = this.filterNode[0];
        this.tab.classList.remove("sticky");
        this.tab.style.width = "auto";
        this.baseInfo.style.marginTop = "0";
      } else if (Math.ceil(viewHeight) === scrollHeight) {
        // 到底的条件
        this.isFocus = this.filterNode[this.filterNode.length - 1];
        this.focus = this.filterNode[this.filterNode.length - 1];
      } else {
        for (let i = 0; i < this.node.length; i++) {
          const el = this.node[i];
          if (el.getBoundingClientRect().top < 0) {
            this.isFocus = this.filterNode[i - 1];
            this.focus = this.filterNode[i - 1];
            this.tab.classList.add("sticky");
            this.tab.style.width = `calc(${this.tabOffsetWidth} - 2%)`;
            this.baseInfo.style.marginTop = this.nameMap[this.tabHeight];
          }
        }
      }
    }, 100)
  },
  activated() {
    this.$nextTick(() => {
      setTimeout(() => {
        // 获取父元素的宽度
        this.isDetail = document.querySelector(".detail-info");
        this.isContainer = document.querySelector(".ccui-app-container-detail");
        if (this.isDetail || this.isContainer) {
          this.tabOffsetWidth =
            (this.isDetail || this.isContainer).offsetWidth + "px";
          this.tabHeight = this.isDetail ? "detail" : "default";
          const refsKey = Object.keys(this.$refs);
          const refsValue = Object.values(this.$refs);
          this.tab = refsValue[0].$el;
          this.baseInfo = refsValue[1].$el;
          this.node = refsValue.map(_ => _.$el);
          this.filterNode = refsKey.filter(_ => _ !== refsKey[0]);
          window.addEventListener("scroll", this.addScroll);
        }
      }, 1000);
    });
  },
  deactivated() {
    window.removeEventListener("scroll", this.addScroll);
    this.isFocus = this.filterNode[0];
    this.focus = this.filterNode[0];
    if (this.tab) {
      this.tab.classList.remove("sticky");
      this.tab.style.width = "auto";
      this.baseInfo.style.marginTop = "0";
    }
  }
};
